<template>
  <div style="padding: 10px;height:100%;">
    <ElTable
      :data="tableData"
      style="width: 100%;"
      row-key="id"
      size="mini"
      class="project-table"
      height="100%"
      stripe
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <TableColumn :sortable="false" prop="name" label="项目/任务名称">
        <template #default="{ row }">
          <span style="display: inline-flex; flex-direction: row; align-items: center">
            <i
              :class="{ 'fy-icon-folder-fill': row.children, 'el-icon-document': !row.children }"
              :style="{ color: row.children ? '#FFC627' : '#00601a' }"
              style="font-size: 24px;margin-right: 4px;"></i>
            {{ row.name }}
          </span>
        </template>
      </TableColumn>
      <TableColumn :sortable="false" prop="code" label="项目编号" width="180" />
      <TableColumn :sortable="false" prop="user" label="责任人" width="100" />
      <TableColumn :sortable="false" prop="start" label="开始时间" width="160">
        <template #default="{ row }"> <i class="fy-icon-time-fill" style="color: #00601a"></i> {{ row.start }} </template>
      </TableColumn>
      <TableColumn :sortable="false" prop="end" label="结束时间" width="160">
        <template #default="{ row }"> <i class="fy-icon-time-fill" style="color: #00601a"></i> {{ row.end }} </template>
      </TableColumn>
      <TableColumn :sortable="false" prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <span :style="{ color: row.status === '已完成' ? '#00601a' : '#77AF40' }">
            <i :class="{ 'fy-icon-success-fill': row.status === '已完成', 'fy-icon-more-fill': row.status === '进行中' }"></i>
            {{ row.status }}
          </span>
        </template>
      </TableColumn>
      <TableColumn :sortable="false" prop="file" label="交付物" width="100" />
      <TableColumn :sortable="false" prop="progress" label="完成进度" width="200">
        <template #default="{ row }">
          <ElProgress v-if="row.progress" :percentage="row.progress" :stroke-width="6" />
        </template>
      </TableColumn>
    </ElTable>
  </div>
</template>

<script>
  export default {
    name: 'ProjectTaskView',
    data() {
      return {
        tableData: [
          {
            id: 1,
            name: '南京花台10MV光伏电站',
            user: '王华',
            code: 'GRFD-0001',
            start: '2022年12月25日',
            end: '2022年12月25日',
            status: '进行中',
            children: [
              {
                id: 2,
                name: '可研阶段',
                user: '王华',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '已完成',
                children: [
                  {
                    id: 6,
                    name: '项目可行性研究调研',
                    user: '李志华',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '已完成',
                    file: 5,
                    progress: 100
                  },
                  {
                    id: 7,
                    name: '投融资分析',
                    user: '毛学新',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '已完成',
                    file: 4,
                    progress: 100
                  }
                ]
              },
              {
                id: 3,
                name: '设计阶段',
                user: '诗韵',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '已完成',
                children: [
                  {
                    id: 8,
                    name: '建设施工设计',
                    user: '诗韵',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '已完成',
                    file: 2,
                    progress: 100
                  }
                ]
              },
              {
                id: 4,
                name: '建设阶段',
                user: '王华',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '进行中',
                children: [
                  {
                    id: 9,
                    name: '生产安全',
                    user: '何紫馨',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '进行中',
                    file: 5,
                    progress: 90
                  },
                  {
                    id: 10,
                    name: '质量管理',
                    user: '李志华',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '进行中',
                    file: 8,
                    progress: 45
                  }
                ]
              },
              {
                id: 5,
                name: '生产运营',
                user: '毛学新',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '进行中',
                children: [
                  {
                    id: 11,
                    name: ' 备维护',
                    user: '诗韵',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '进行中',
                    file: 2,
                    progress: 80
                  }
                ]
              }
            ]
          },
          /* {
            id: 1137,
            name: '南京花台10MV光伏电站',
            user: '王华',
            code: 'GRFD-0001',
            start: '2022年12月25日',
            end: '2022年12月25日',
            status: '进行中',
            children: [
              {
                id: 2174,
                name: '可研阶段',
                user: '王华',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '已完成',
                children: [
                  {
                    id: 6551,
                    name: '项目可行性研究调研',
                    user: '李志华',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '已完成',
                    file: 5,
                    progress: 100
                  },
                  {
                    id: 718,
                    name: '投融资分析',
                    user: '毛学新',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '已完成',
                    file: 4,
                    progress: 100
                  }
                ]
              },
              {
                id: 317,
                name: '设计阶段',
                user: '诗韵',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '已完成',
                children: [
                  {
                    id: 812,
                    name: '建设施工设计',
                    user: '诗韵',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '已完成',
                    file: 2,
                    progress: 100
                  }
                ]
              },
              {
                id: 411,
                name: '建设阶段',
                user: '王华',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '进行中',
                children: [
                  {
                    id: 911,
                    name: '生产安全',
                    user: '何紫馨',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '进行中',
                    file: 5,
                    progress: 90
                  },
                  {
                    id: 1001,
                    name: '质量管理',
                    user: '李志华',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '进行中',
                    file: 81,
                    progress: 45
                  }
                ]
              },
              {
                id: 51,
                name: '生产运营',
                user: '毛学新',
                start: '2022年12月25日',
                end: '2022年12月25日',
                status: '进行中',
                children: [
                  {
                    id: 111,
                    name: ' 备维护',
                    user: '诗韵',
                    start: '2022年12月25日',
                    end: '2022年12月25日',
                    status: '进行中',
                    file: 211,
                    progress: 80
                  }
                ]
              }
            ]
          } */
        ]
      }
    }
  }
</script>

<style lang="scss">
  //
</style>
